<template>
  <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      @close="onClose"
  >
    <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="120px"
        size="small"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="旅游产品ID" prop="travel_id">
            <el-input
                v-model="formData.travel_id"
                placeholder="请输入旅游产品ID"
                type="number"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="SKU ID" prop="travel_sku_id">
            <el-input
                v-model="formData.travel_sku_id"
                placeholder="请输入SKU ID"
                type="number"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="SKU库存ID" prop="travel_sku_stock_id">
            <el-input
                v-model="formData.travel_sku_stock_id"
                placeholder="请输入SKU库存ID"
                type="number"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户ID" prop="user_id">
            <el-input
                v-model="formData.user_id"
                placeholder="请输入用户ID"
                type="number"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="分销员ID" prop="distributor_id">
            <el-input
                v-model="formData.distributor_id"
                placeholder="请输入分销员ID"
                type="number"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预付金额" prop="prepay_amount">
            <el-input
                v-model="formData.prepay_amount"
                placeholder="请输入预付金额"
                type="number"
                step="0.01"
            >
              <template slot="prepend">¥</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="分销佣金" prop="share_amount">
            <el-input
                v-model="formData.share_amount"
                placeholder="请输入分销佣金"
                type="number"
                step="0.01"
            >
              <template slot="prepend">¥</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select
                v-model="formData.status"
                placeholder="请选择状态"
                style="width: 100%"
            >
              <el-option label="待支付" value="pending" />
              <el-option label="已支付" value="paid" />
              <el-option label="退款中" value="refunding" />
              <el-option label="已确认" value="confirmed" />
              <el-option label="已退款" value="refunded" />
              <el-option label="已完成" value="completed" />
              <el-option label="已取消" value="cancelled" />
              <el-option label="待确认" value="pending_verification" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="分销二维码" prop="qrcode">
            <el-input
                v-model="formData.qrcode"
                placeholder="请输入分销二维码URL"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分销海报" prop="share_image_url">
            <el-input
                v-model="formData.share_image_url"
                placeholder="请输入分销海报URL"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="创建者" prop="creator">
            <el-input
                v-model="formData.creator"
                placeholder="请输入创建者"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更新者" prop="updater">
            <el-input
                v-model="formData.updater"
                placeholder="请输入更新者"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit" :loading="submitLoading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { http } from "@/api";

export default {
  name: "TravelShareOrderAdd",
  data() {
    return {
      dialogVisible: false,
      dialogTitle: "新增分销代付订单",
      submitLoading: false,
      isEdit: false,
      editId: null,
      formData: {
        travel_id: "",
        travel_sku_id: "",
        travel_sku_stock_id: "",
        user_id: "",
        distributor_id: "",
        prepay_amount: "",
        share_amount: "",
        qrcode: "",
        share_image_url: "",
        creator: "",
        updater: "",
        status: "pending"
      },
      formRules: {
        travel_id: [
          { required: true, message: "请输入旅游产品ID", trigger: "blur" }
        ],
        prepay_amount: [
          { required: true, message: "请输入预付金额", trigger: "blur" },
          { pattern: /^\d+(\.\d{1,2})?$/, message: "请输入正确的金额格式", trigger: "blur" }
        ],
        share_amount: [
          { required: true, message: "请输入分销佣金", trigger: "blur" },
          { pattern: /^\d+(\.\d{1,2})?$/, message: "请输入正确的金额格式", trigger: "blur" }
        ],
        status: [
          { required: true, message: "请选择状态", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    // 打开新增对话框
    open() {
      this.dialogVisible = true;
      this.isEdit = false;
      this.dialogTitle = "新增分销代付订单";
      this.resetForm();
    },
    
    // 打开编辑对话框
    openEdit(row) {
      this.dialogVisible = true;
      this.isEdit = true;
      this.editId = row.id;
      this.dialogTitle = "编辑分销代付订单";
      this.formData = { ...row };
    },
    
    // 关闭对话框
    onClose() {
      this.dialogVisible = false;
      this.resetForm();
    },
    
    // 重置表单
    resetForm() {
      this.formData = {
        travel_id: "",
        travel_sku_id: "",
        travel_sku_stock_id: "",
        user_id: "",
        distributor_id: "",
        prepay_amount: "",
        share_amount: "",
        qrcode: "",
        share_image_url: "",
        creator: "",
        updater: "",
        status: "pending"
      };
      this.$nextTick(() => {
        this.$refs.formRef && this.$refs.formRef.clearValidate();
      });
    },
    
    // 提交表单
    onSubmit() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          this.submitLoading = true;
          try {
            if (this.isEdit) {
              // 编辑
              await http.travelShareOrder.update(this.editId, this.formData);
              this.$message.success("编辑成功");
            } else {
              // 新增
              await http.travelShareOrder.create(this.formData);
              this.$message.success("新增成功");
            }
            this.onClose();
            this.$emit("get-page");
          } catch (error) {
            console.error("提交失败:", error);
            this.$message.error("操作失败");
          } finally {
            this.submitLoading = false;
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.dialog-footer {
  text-align: right;
}
</style>
